@charset "utf-8";

@import "./reset.scss";
@import "./common.scss";

@function getvw($w) {
    @return $w / 1920 * 100 + vw;
}

nav{
    ul{
        li:nth-child(5){
            a{
                color: #ff4a11;
            }
        }
    }
}

main{
    width: 100%;
    margin-top: getvw(80);
    .banner{
        //轮播图设置
        .swiper-slide{
            width: 100%;
            height: getvw(1080);
            position: relative;
            .bg{
                width: 100%;
                height: 100%;
            }
            //轮播图的文字图片设置
            .yh{
                width: getvw(335);
                height: getvw(195);
                position: absolute;
                top: getvw(300);
                left: getvw(200);
            }
            .pro{
                width: getvw(440);
                height: getvw(75);
                position: absolute;
                top: getvw(430);
                left: getvw(350);
            }
            .offer{
                width: getvw(340);
                height: getvw(55);
                position: absolute;
                top: getvw(500);
                left: getvw(230);
            }
            .packing{
                width: getvw(285);
                height: getvw(70);
                position: absolute;
                left: getvw(500);
                bottom: getvw(450);
            }
            .professional{
                width: getvw(400);
                height: getvw(65);
                position: absolute;
                left: getvw(280);
                bottom: getvw(390);
            }
        }
        //第二张轮播图
        .second{
            display: flex;
            flex-direction: column;
            align-items: center;
            .secondBg{
                width: 100%;
                height: 100%;
            }
            .secondYh{
                width: getvw(300);
                height: getvw(170);
                position: absolute;
                top: getvw(230);
            }
            .future{
                width: getvw(900);
                height: getvw(85);
                position: absolute;
                top: getvw(420);
            }
            .lead{
                width: getvw(650);
                height: getvw(60);
                position: absolute;
                top: getvw(520);
            }
        }
        //第三张轮播图
        .third{
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            .thirdBg{
                width: 100%;
                height: 100%;
            }
            .company{
                width: getvw(720);
                height: getvw(80);
                position: absolute;
                top: getvw(350);
            }
            .gz{
                width: getvw(1000);
                height: getvw(30);
                position: absolute;
                top: getvw(455);
            }
            .pro{
                width: getvw(390);
                height: getvw(35);
                position: absolute;
                top: getvw(520);
            }
        }
    }
    .design{
        width: 100%;
        ul{
            width: 100%;
            display: flex;
            li{
                position: relative;
            }
            li>img{
                width: calc(100%);
            }
            li>ol{
                position: absolute;
                left: getvw(50);
                bottom: getvw(40);
                color: #999999;
            }
        }
    }
    //  案例设置 
    .case{
        width: 100%;
        ul{
            li{
                text-align: center;
                p{
                    font-size: getvw(45);
                    font-weight: bold;
                    margin-top: getvw(95);
                }
                span{
                    font-size: getvw(28);
                    margin-top: getvw(15);
                }
            }
            li:last-child{
                margin-top: getvw(80);
                ol{
                    display: flex;
                    li:last-child{
                        margin-top: 0;
                    }
                    img{
                        width: calc(100%);
                        display: inline-block;
                    }
                }
            }
        }
    }
}

//后面添加效果的类名
.move{
    transform: translateY(getvw(-60));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}